<template>
	<view class="">
		<view class="form-bx">
			<u--form :model="form" ref="uForm" :errorType="['toast']" labelWidth="100">
				<u-form-item label="客户类型" prop="userType" borderBottom v-if="!isEdit">
					<u-radio-group v-model="form.userType" placement="row" @change="()=>{form.userName='',form.userId=0}">
						<u-radio activeColor="red" :name="0" label="门店客户"></u-radio>
						<u-radio activeColor="red" :name="1" label="新客户"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item 
					v-if="form.userType===0" 
					borderBottom 
					label="顾客姓名" 
					prop="userName" 
					@click="$u.route('/pages/selectPage/client', {isRadio: true})"
				>
					<u-input border="none" v-model="form.userName" placeholder="请选择门店顾客" disabledColor="#fff" disabled  />
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="顾客姓名" prop="userName" borderBottom v-if="form.userType===1">
					<u-input border="none" v-model="form.userName" placeholder="请填写顾客姓名" />
				</u-form-item>
				<u-form-item label="手机号码" prop="mobile" borderBottom v-if="form.userType===1">
					<u-input border="none" type="number" v-model="form.mobile" placeholder="请填写顾客手机号码" />
				</u-form-item>
				<u-form-item label="客户来源" prop="userSourceText" borderBottom v-if="form.userType===1" @click="showUserSource=true">
					<u-input border="none" v-model="form.userSourceText" disabledColor="#fff" disabled placeholder="请选择客户来源" />
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="到店时间" prop="appointmentTime" borderBottom @click="showTimePicker=true">
					<u-input border="none" v-model="form.appointmentTime" disabledColor="#fff" disabled />
					<u-icon slot="right" name="arrow-right" />
				</u-form-item>
				<u-form-item label="备注" prop="remark">
					<u-input border="none" v-model="form.remark" placeholder="请输入备注(选填)" />
				</u-form-item>
				<view class="gap"></view>
			</u--form>
			<view class="bg-white">
				<view v-for="(item, index) in form.items" :key="index">
					<view class="padding-20 flex justify-between line-red border-b">
						<text class="fsize-30">项目{{index+1}}</text>
						<view class="del-btn" @click="onDel(index)" v-if="!isEdit">
							<u-icon name="trash" label="删除" color="#e54d42" labelColor="#e54d42" labelSize="12" size="16"/>
						</view>
					</view>
					<view class="border-b padding-20 flex justify-between">
						<text class="fsize-30">服务项目</text>
						<view class="flex align-center">
							<u-input v-model="item.projectName" border="none" placeholder="请选择项目" disabledColor="#fff" disabled inputAlign="right"/>
							<u-icon name="arrow-right" color="#606266" size="16"/>
						</view>
					</view>
					<view class="border-b padding-20 flex justify-between" @click="$u.route('/pages/selectPage/staff',{index: index, type: '1'})">
						<text class="fsize-30">服务人员</text>
						<view class="flex align-center">
							<u-input v-model="item.staffName" border="none" placeholder="请选择服务人员" disabledColor="#fff" disabled inputAlign="right"/>
							<u-icon name="arrow-right" color="#606266" size="16"/>
						</view>
					</view>
				</view>
				<view 
					class="padding-20 line-red flex justify-center align-center fsize-30" 
					@click="$u.route('/pages/selectPage/project',{type: '2'})"
					v-if="!isEdit"
				>添加服务</view>
			</view>
		</view>
		<view class="ubtn">
			<u-button type="error" @click="submit" text="确定" size="large"/>
		</view>
		<u-picker 
			:show="showOT" 
			:columns="ots" 
			keyName="name" 
			:immediateChange="true"
			@confirm="changeOT" 
			:closeOnClickOverlay="true" 
			@cancel="showOT=false"
		/>
		<u-toast ref="uToast"></u-toast>
		<u-datetime-picker
			:show="showTimePicker"
			v-model="datetime"
			mode="datetime"
			@cancel = "showTimePicker=false"
			@confirm="onConfirmDataTime"
		></u-datetime-picker>
		<u-picker 
			:show="showUserSource" 
			:columns="userSourceList"
			keyName="description"
			@close="showUserSource = false"
			@confirm="onUserSource" 
		></u-picker>
	</view>
</template>

<script>
	import getDateTime from '@/common/getDataTime.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isEdit: false,
				showOT: false,
				showTimePicker: false,
				showUserSource: false,
				datetime: '',
				dtIndex: null,
				qrcUrl: '',
				showQRC: false,
				userSourceList:[],
				ots: [[
					{ name: '项目', value: 11 },
					{ name: '商品', value: 1 },
					{ name: '卡项', value: 12 }
				]],
				cIndex: 0,
				isShowCalendar: false,
				timeRadios: [],
				dateList: [],
				form: {
					userType: 0,
					mobile: '',
					userName: '',
					userSource: '',
					userSourceText:'',
					source:1,
					userId: null,
					appointmentTime:'',
					remark:'',
					items:[],
				},
				rules: {
					userName:[{
						required: true,
						message: '请输入顾客姓名',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		computed: { ...mapState(['store']) },
		onLoad(opt) {
			this.getUserSource()
			if(opt.id){
				uni.setNavigationBarTitle({ title:'修改预约' })
				this.isEdit = true
				this.getDetail(opt.id)
			}else {
				this.datetime = getDateTime.dateTimeStr('y/m/d h:i')
				this.form.appointmentTime = getDateTime.dateTimeStr('y/m/d h:i')
			}
			// 监听事件  
			uni.$on('client', obj => {
				this.form.userName = obj.nickName
				this.form.userMobile = obj.mobile
				this.form.userId = obj.id
			})
			
			uni.$on('add-pct', arr => {
				const result = arr.flatMap(({ name: projectName, id: projectId,nums, price }) =>
				  Array.from({ length: nums }, () => ({ projectId, projectName,staffName:'',staffId:0, nums:1, price }))
				)
				this.form.items.push(...result)
			})
			uni.$on('select-staff', obj => {
				this.form.items[obj.index].staffId = obj.id
				this.form.items[obj.index].staffName = obj.nickName
			})
		},
		onUnload() {// 移除监听事件  
			uni.$off('client')
			uni.$off('add-pct')
			uni.$off('select-staff')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			onUserSource(e){
				this.form.userSourceText = e.value[0].description
				this.form.userSource = e.value[0].value
				this.showUserSource = false
			},
			getUserSource(){
				this.$reqJsonPost('UserGetCreate').then(res=>{
					this.userSourceList = [res.data.userSource]
				})
			},
			getDetail(id){
				this.$reqJsonPost('StoreStaffDoSetisGetEdit', { id: id }).then(res=>{
					this.datetime = res.data.model.appointmentTime
					this.form = {
						id: res.data.model.id,
						userType: 0,
						userName: res.data.userModel.nickName,
						userId: res.data.userModel.id,
						status: res.data.model.status,
						appointmentTime:res.data.model.appointmentTime,
						remark:res.data.model.remark,
						items:[{
							projectId:res.data.project.id, 
							projectName:res.data.project.name, 
							staffName: res.data.staff.nickName,
							staffId: res.data.staff.id,
						}],
					}
				})
			},
			onDel(i){
				this.form.items = this.form.items.filter((value, index) => index !== i)
			},
			onConfirmDataTime(e){
				this.form.appointmentTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
				this.showTimePicker = false
			},
			changeOT(e) {
				this.form.orderType = e.value[0].value
				this.form.orderTypeName = e.value[0].name
				this.form.items = []
				this.showOT = false
			},
			// 提交
			submit() {
				let that = this
				this.$refs.uForm.validate().then(res => {
					if(!that.isEdit){
						if(that.form.userType === 2 && uni.$u.test.isEmpty(that.form.mobile)){
							that.$refs.uToast.show({ message:'请填写手机号码!' })
						} else if(that.form.items.length===0){
							that.$refs.uToast.show({ message:'请填选择服务项目!' })
						}else if(that.form.userType===1 && uni.$u.test.isEmpty(that.form.userSourceText)){
							that.$refs.uToast.show({ message:'请填选择客户来源!' })
						}else {
							that.$reqJsonPost('StoreStaffDoCreate', that.form).then(res=>{
								that.$refs.uToast.show({
									message:res.msg , 
									complete(){
										uni.$emit('upResList')
										uni.navigateBack()
									}
								})
							})
						}
					}else {
						that.$reqJsonPost('StoreStaffDoSetisDoEdit', that.form).then(res=>{
							that.$refs.uToast.show({
								message:res.msg , 
								complete(){
									uni.$emit('reId', { id:that.form.id })
									uni.navigateBack()
								}
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.gap {
		padding: 20rpx;
		color: #aaa;
		font-size: 28rpx;
	}

	.ubtn {
		padding: 0 40rpx;
		margin-top: 40rpx;
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}

	.tag-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1px #d6d7d9 solid;

		// justify-content: space-around;
		.tag-item {
			border: 1px #d6d7d9 solid;
			text-align: center;
			// width: 160rpx;
			padding: 10rpx 10rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-right: 20rpx;
		}

		.tag-active {
			border-color: #fa3534;
			color: #fa3534;
		}

		.tag-active2 {
			background-color: #d6d7d9;
			color: #999;
		}
	}
	.del-btn{
		border: 1px #e54d42 solid;
		border-radius: 3px;
		padding: 2px 4px;
	}
</style>
